<template>
<!-- 预览弹窗 -->
  <div>
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="60%"
      @close="closeDialog">
      <!-- <span>这是一段信息</span> -->
      <!-- 大盒子 -->
      <div class="box">
        <!-- 头 -->
        <div class="title-box">
          <el-row style="margin-bottom: 15px">
            <el-col :span="6">【题型】：{{transType(dialogData.questionType)}}</el-col>
            <el-col :span="6">【编号】：{{dialogData.id}}</el-col>
            <el-col :span="6">【难度】：{{transDiffcult(dialogData.difficulty)}}</el-col>
            <el-col :span="6">【标签】：{{dialogData.tags}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">【学科】：{{dialogData.subjectID}}</el-col>
            <el-col :span="6">【目录】：{{dialogData.directoryName}}</el-col>
            <el-col :span="6">【方向】：{{dialogData.direction}}</el-col>
          </el-row>
        </div>
        <!-- 分割线 -->
        <hr style="margin: 18px 0" />
        <!-- 题干区 -->
        <div class="stem-box">
          <span>【题干】：</span>
          <div v-html="dialogData.question" style="color:#7b7bff"></div>
          <!--选项区 -->
          <!-- 若为简答题 则不显示 -->
          <div style="display: flex" v-if="dialogData.questionType !== '3'"> 
            <div style="display: flex">
              <!-- 单选题 /多选 / 简答-->
                <div v-if="dialogData.questionType === '1'">单选题</div>
                <div v-else-if="dialogData.questionType === '2'">多选题</div>
                <div v-else-if="dialogData.questionType === '3'">简答题</div>
            </div>  选项：（以下选中的选项为正确答案）</div>
            <!-- 选项 -->
            <!-- 如果是单选 -->
          <div class="option" v-if="dialogData.questionType === '1'">
              <el-radio v-model="item.isRight" :label="1" v-for="item in dialogData.options" :key="item.id">{{item.title}}</el-radio>
            <!-- <el-radio v-model="item.isRight" :label="1" v-for="item in dialogData.options"></el-radio> -->
          </div>
          <!-- 如果是多选 -->
          <div class="option" v-if="dialogData.questionType === '2'">
            <el-checkbox v-model="dialogData.isRight" v-for="item in dialogData.options" :key="item.id">{{item.title}}</el-checkbox>
          </div>
        </div>
        <!-- 分割线 -->
        <hr style="margin: 18px 0" />
        <!-- 参考答案 -->
        <div>【参考答案】：<el-button type="danger">视频答案预览</el-button></div>
        <!-- 分割线 -->
        <hr style="margin: 18px 0" />
        <div>
          <span>【答案解析】：</span>
          <span style="margin: 10px 0;" v-html="dialogData.answer"></span>
        </div>
        <!-- 分割线 -->
        <hr style="margin: 18px 0" />
        <!-- 题目备注 -->
        <div>
          <span>【题目备注】：</span>
          <span style="margin: 10px 0;" v-html="dialogData.remarks" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
        <!-- <el-button type="primary" @click="confirm">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {questionsDetail} from '@/api/questions'

export default {
name: 'ViewDialog',                                                                              
props: {
  dialogVisible: {
    default: false,
    type: Boolean
  }
},
data() {
  return {
    radio: '1',
    checkList: '1',//多选
    dialogData: {},
    optionList: []//选项列表

  }
},
methods: {
  closeDialog() {
    this.$emit('close-Dialog')
  },
  // 数据回显
  async viewDetail(id) {
    const res = await questionsDetail(id)
    console.log( '数据回显数据',res);
    this.dialogData = res
  },
  // async openDialog(id) {
  //   this.$emit('open-dialog')
  //   // 数据回显
  //   const res = await questionsDetail(id)
  //   console.log(res);
  //   this.dialogData = res
  // },
  // 题型的转换
    transDiffcult (num) {
      const TYPE = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return TYPE[num]
    },
    // 弹窗调用的转换
    transType (num) {
      const TYPE = {
        1: '单选题',
        2: '多选题',
        3: '简答题'
      }
      return TYPE[num]
    },
  // confirm() {

  // }
}
}
</script>

<style lang="scss" scoped>
.box {
    border: 1px solid pink;
    // height: 300px;
  .title-box {
  }
  .stem-box {
    .option {
      display: flex;
      flex-direction: column;
      // margin-bottom: 15px;
    }
  }
}
</style>